<template>
  <div class="config-box">
    <div class="iot-top">
      <div class="top-left">木垒县监管平台 - 配置页面</div>
    </div>

    <el-form ref="form" style="padding: 0 30px;" :model="form" size="small" label-width="100px">
      <el-form-item class="configtitle" label="1.项目周期配置" />
      <div class="configmapbox">
        <el-form-item label="项目总工期">
          <el-input v-model="form.value1"></el-input>
        </el-form-item>
        <el-form-item label="已安全生产">
          <el-input v-model="form.value2"></el-input>
        </el-form-item>
        <el-form-item label="项目倒计时">
          <el-input v-model="form.value3"></el-input>
        </el-form-item>
        <el-form-item label="风机总数">
          <el-input v-model="form.value4"></el-input>
        </el-form-item>
        <el-form-item label="吊装作业">
          <el-input v-model="form.value11"></el-input>
        </el-form-item>
      </div>

      <el-form-item class="configtitle" label="2.未销项隐患配置" />
      <div class="configmapbox">
        <el-form-item label="质量问题">
          <el-input v-model="form.value5"></el-input>
        </el-form-item>
        <el-form-item label="已解决">
          <el-input v-model="form.value6"></el-input>
        </el-form-item>
        <el-form-item label="安全问题">
          <el-input v-model="form.value7"></el-input>
        </el-form-item>
        <el-form-item label="已解决">
          <el-input v-model="form.value8"></el-input>
        </el-form-item>
      </div>

      <el-form-item class="configtitle" label="3.设备配置" />
      <div class="configmapbox" v-for="(item,index) in eqdata" :key="index">
        <template>
          <div class="eqtitle">{{item.name}}</div>
          <el-form-item label="风机">
            <el-input v-model="item.fenji"></el-input>
          </el-form-item>
          <el-form-item label="摄像头">
            <el-input v-model="item.shexain"></el-input>
          </el-form-item>
          <el-form-item label></el-form-item>
          <el-form-item label></el-form-item>
        </template>
      </div>

      <el-form-item>
        <!-- <el-button @click="onback">返回</el-button> -->

        <el-button type="primary" @click="onSubmit">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
const axios = require("axios");
import { TOKEN_PROD, TOKEN_DEV, VUE_BASE_API } from "@/utils/publicdata";

export default {
  data() {
    return {
      form: {
        id: "3",
        value1: "",
        value2: "",
        value3: "",
        value4: "",
        value5: "",
        value6: "",
        value7: "",
        value8: "",
        value9: "",
        // 风机总数
        value10: "",
        // value11修改为吊装数量，原摄像头数量更改为调用接口后再计算
        value11: "",
      },
      //  设备值
      eqdata: [
        {
          name: "锦鸿电力",
          fenji: "",
          shexain: ""
        },
        {
          name: "新疆立新",
          fenji: "",
          shexain: ""
        },
        {
          name: "新疆华电",
          fenji: "",
          shexain: ""
        },
        {
          name: "国家电投",
          fenji: "",
          shexain: ""
        },
        {
          name: "昌吉国投",
          fenji: "",
          shexain: ""
        },
        {
          name: "新疆双杰",
          fenji: "",
          shexain: ""
        },

        {
          name: "中煤木垒",
          fenji: "",
          shexain: ""
        }
      ]
    };
  },
  created() {
    this.getlistdata();
  },
  methods: {
    // 查询
    getlistdata() {
      //   调用接口
      // 定义请求的URL
      const url = `${VUE_BASE_API}/xmgl/mlConfig/list`;

      // console.log("TOKEN_PROD", TOKEN_PROD);

      // 定义请求头
      const headers = {
        Authorization: TOKEN_PROD,
        "Content-Type": "application/json"
      };

      // 发送GET请求
      axios
        .post(url, {}, { headers })
        .then(response => {
          // 从响应中提取total的值
          // console.log("查询数据", response.data);
          // console.log("查询数据", response.data.code);
          if (response.data.code == "200") {
            console.log("=====");
            this.form = response.data.result[0];
            this.eqdata = JSON.parse(response.data.result[0].value9);
          }
        })
        .catch(error => {
          console.error("Error:", error.message);
        });
    },
    // 保存
    onSubmit() {
      const regex = /^\d+$/;
      console.log("regex.test(this.form.value1)", regex.test(this.form.value1));
      if (!regex.test(this.form.value1))
        return this.$message.warning("项目总工期请输入数字");
      if (!regex.test(this.form.value2))
        return this.$message.warning("已安全生产请输入数字");
      if (!regex.test(this.form.value3))
        return this.$message.warning("项目倒计时请输入数字");
      if (!regex.test(this.form.value4))
        return this.$message.warning("风机总数请输入数字");
      if (!regex.test(this.form.value5))
        return this.$message.warning("质量问题请输入数字");
      if (!regex.test(this.form.value6))
        return this.$message.warning("已解决请输入数字");
      if (!regex.test(this.form.value7))
        return this.$message.warning("项目倒计时请输入数字");
      if (!regex.test(this.form.value8))
        return this.$message.warning("已解决请输入数字");

      const isvalid = this.eqdata.every((obj, index) => {
        if (!regex.test(obj.fenji)) {
          this.$message.warning("风机请输入数字");
          return false;
        }

        if (!regex.test(obj.shexain)) {
          this.$message.warning("摄像头请输入数字");
          return false;
        }

        return true;
      });

      if (!isvalid) return;

      console.log("==============通过设备验证===============");

      let totalFenji = 0;
      // let totalShexain = 0;

      this.eqdata.forEach(item => {
        // 将fenji和shexain转换为数字，如果为空则视为0
        const fenjiNum = item.fenji ? Number(item.fenji) : 0;
        // const shexainNum = item.shexain ? Number(item.shexain) : 0;

        // 累加到总数中
        totalFenji += fenjiNum;
        // totalShexain += shexainNum;
      });

      console.log("fenji总和:", totalFenji);
      // console.log("shexain总和:", totalShexain);

      this.form.value9 = JSON.stringify(this.eqdata);
      this.form.value10 = totalFenji;
      // this.form.value11 = totalShexain;

      //   调用接口
      // 定义请求的URL
      const url = `${VUE_BASE_API}/xmgl/mlConfig/edit`;

      console.log("TOKEN_PROD", TOKEN_PROD);

      // 定义请求头
      const headers = {
        Authorization: TOKEN_PROD,
        "Content-Type": "application/json"
      };

      const requestBody = this.form;

      // 发送GET请求
      axios
        .post(url, requestBody, { headers })
        .then(response => {
          // 从响应中提取total的值
          console.log("response", response);
          if (response.data.code == "200") {
            this.$message.success("配置成功-请回到主页面");
          }
        })
        .catch(error => {
          console.error("Error:", error.message);
        });
    },
    // 返回
    onback() {
      this.$router.push("/");
    },
    // 判断
    handleInput(value) {
      // 使用正则表达式限制只能输入数字
      this.form.name = value.replace(/[^0-9]/g, "");
    }
  }
};
</script>

<style lang="scss" scoped>
.config-box {
  width: 100%;
  height: 100%;
  height: 1083px;
  weight: 1923px;
  display: flex;
  flex-direction: column;
  // background: linear-gradient(180deg, #0e1629 0%, #0785c4 100%);
  background: linear-gradient(180deg, #00091c 0%, #006ea7 100%);
  // padding: 0 30px;
  //   background: skyblue;

  .iot-top {
    width: 100%;
    height: 100px;
    // background: skyblue;
    background: url("~@/assets/iotimg/头部大色块.png") no-repeat center center;
    background-size: cover;
    background-size: 100% 100%;
    display: flex;
    align-items: center;

    .top-left {
      width: 772px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
      font-weight: bold;
      font-size: 30px;
      letter-spacing: 5px;
      letter-spacing: 9px;
      text-shadow: 0px 0px 6px #06bdfb;
      text-align: center;
      font-style: normal;
      text-transform: none;
      color: #ffffff;

      img {
        width: 30px;
        height: 30px;
        cursor: pointer;
      }
    }
  }

  ::v-deep .el-form {
    .configtitle {
      .el-form-item__label {
        width: 400px !important;
        text-align: left;
      }
    }

    .eqtitle {
      color: #ffffff;
      line-height: 35px;
      font-size: 16px;
    }

    .configmapbox {
      display: flex;
    }

    .el-form-item {
      flex: 1;
    }

    .el-form-item__label {
      color: #ffffff !important;
    }

    // .el-input__inner {
    //   width: 400px;
    // }
  }
}
</style>